<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>    <el-container>
      <el-container>
        <el-main>
          <!--商品表格开始-->
          <el-table :row-class-name="tableRowClassName" :data="productArr" @back="goBack" style="width: 100%;text-align: center">
            <el-table-column type="index" label="编号" width="50"></el-table-column>
            <el-table-column prop="title" label="商品标题" width="100"></el-table-column>
            <el-table-column prop="server_id" label="商品种类"  width="100"></el-table-column>
            <el-table-column prop="price" label="价格" width="80"></el-table-column>
            <el-table-column prop="old_price" label="原价" width="80"></el-table-column>
            <el-table-column prop="sale_count" label="销量" width="80"></el-table-column>
            <el-table-column prop="day" label="到期日期" width="100"></el-table-column>
            <el-table-column  label="是否过期" width="120">
              <template slot-scope="scope">
                {{scope.row.overdue}}
              </template>
            </el-table-column>
            <el-table-column  label="商品图片" width="100">
              <!--自定义内容必须写在template里面-->
              <template slot-scope="scope">
                <!--scope.row得到当前行对应的数组里面的对象-->
                <img :src="require('D:/Tedu/tedu/data-management-system/files'+scope.row.url)" width="100%" alt="">
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit" size="mini" circle
                    type="primary" @click="update(scope.$index, scope.row)"></el-button>
                  <el-button
                      @click="openDeleteConfirn(scope.row)"
                      type="danger" icon="el-icon-delete" size="mini" circle
                      slot="reference"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--商品表格结束-->

        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
export default {
  data: function () {
    return {
      productArr:[],
    }
  },
  methods: {
    goBack(){
      //返回上一页面
      history.back();
    },
    tableRowClassName(
        {
          row,
          rowIndex
        }){
      if (row.overdue == "已过期") {
        return 'success-row';
      } else if (row.overdue == "48小时内过期") {
        return 'warning-row';
      }else if (row.overdue == "72小时内过期") {
        return 'debug-row';
      }
      return '正常销售';
    },
    update: function(index,row){
      this.$router.push({
        path: '/sys-product/temp/products/ProductUpdate',
        query: {
          id: row.id
        }
      })
    },
    openDeleteConfirn(product) {
      let message = "此操作将永久删除该项目类别, 是否继续?";
      let title = "提示";
      this.$confirm(message, title, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.productDelete(product)
        }, 1000);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
      });
    },
    productDelete(product){
      let url="http://localhost:9081/product/delete/"
      this.axios
          .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
          .post(url+product.id).then((response)=> {
        /*this.productArr.splice(i,1)*/
        location.reload()
      })
    },
  },
  created:function () {
    console.log("开始执行加载商品列表功能```")
    let url="http://localhost:9081/product/select"
    console.log(url)
    this.axios
        .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
        .get(url).then( (response)=> {
      console.log(response.data)
      this.productArr=response.data;
      console.log("11111111productArr=")
      console.log(this.productArr)
    })
  }
}
</script>

<style>
.el-table .warning-row {
  background: #FFE4B5 !important;
}

.el-table .success-row {
  background: #FFA07A !important;
}

.el-table .debug-row {
  background: #F0FFF0 !important;
}
</style>